<template>
    <div class="quiz-container">
        <!-- 问题栏 -->
        <div class="question-card">
            <h2>{{ questions[currentQuestion].title }}</h2>
            <div class="options">
                <button v-for="(option, index) in questions[currentQuestion].options" :key="index" class="option-btn"
                    :class="{ selected: answers[currentQuestion] === index, correct: isCorrect(currentQuestion, index) }"
                    @click="selectOption(index)">
                    {{ option }}
                </button>
            </div>
            <!-- 显示正确答案 -->
            <div v-if="answers[currentQuestion] !== undefined" class="answer-feedback">
                <p v-if="answers[currentQuestion] === questions[currentQuestion].correctAnswer">
                    恭喜您，答案正确！
                </p>
                <p v-else>
                    抱歉，答案错误。正确答案是: {{ questions[currentQuestion].options[questions[currentQuestion].correctAnswer] }}
                </p>
            </div>
        </div>

        <!-- 导航按钮 -->
        <div class="navigation-buttons">
            <button class="nav-btn" :disabled="currentQuestion === 0" @click="prevQuestion">
                上一题
            </button>
            <button class="nav-btn" @click="nextQuestion">
                {{ currentQuestion === questions.length - 1 ? "提交" : "下一题" }}
            </button>
        </div>
    </div>
</template>


<script>
import request from '@/utils/request';

export default {
    data() {
        return {
            currentQuestion: 0, // 当前题目索引
            answers: [], // 保存用户选择的答案
            questions: [], // 存储从后端获取的问题
        };
    },
    created() {
        this.questions = JSON.parse(sessionStorage.getItem('quizQuestions'));
        console.log(this.questions);
        this.questions = this.shuffleArray(this.questions);
        console.log(this.questions);
    },
    methods: {
        shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                // 生成一个0到i之间的随机索引
                const j = Math.floor(Math.random() * (i + 1));
                // 交换当前元素和随机索引对应的元素
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        },
        // 保存用户选择的选项
        selectOption(index) {
            this.$set(this.answers, this.currentQuestion, index);
        },
        // 跳转到上一题
        prevQuestion() {
            if (this.currentQuestion > 0) {
                this.currentQuestion--;
            }
        },
        // 跳转到下一题或提交
        nextQuestion() {
            if (this.currentQuestion < this.questions.length - 1) {
                this.currentQuestion++;
            } else {
                this.submitQuiz();
            }
        },
        // 提交测验并显示分数
        submitQuiz() {
            const totalQuestions = this.questions.length;
            let correctCount = 0;

            // 计算正确答案数量，并记录错题
            this.questions.forEach((q, index) => {
                if (this.answers[index] === q.correctAnswer) {
                    correctCount++;
                } else {
                }
            });

            // 显示结果
            const score = ((correctCount / totalQuestions) * 100).toFixed(2);
            let resultMessage = `您的分数是：${score}%。\n\n详细结果：\n`;

            this.questions.forEach((q, index) => {
                const userAnswer = this.answers[index] !== undefined ? q.options[this.answers[index]] : "未作答";
                const correctAnswer = q.options[q.correctAnswer];
                resultMessage += `第${index + 1}题: 您的答案是“${userAnswer}”，正确答案是“${correctAnswer}”。\n`;
            });

            alert(resultMessage);

            try {
                window.close(); // 尝试关闭页面
            } catch (error) {
                console.error("无法关闭页面，可能是因为浏览器限制。");
            }
        },
        // 判断答案是否正确
        isCorrect(questionIndex, optionIndex) {
            return this.answers[questionIndex] === optionIndex && optionIndex === this.questions[questionIndex].correctAnswer;
        }
    }
};
</script>


<style scoped>
/* 页面布局 */
.quiz-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

/* 问题卡片 */
.question-card {
    background-color: #ffffff;
    padding: 20px 30px;
    width: 80%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.question-card h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333333;
}

/* 选项按钮 */
.options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-btn {
    padding: 12px;
    font-size: 16px;
    border: 2px solid #d1d1d1;
    background-color: #f3f3f3;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.option-btn:hover {
    background-color: #e6f7ff;
    border-color: #1890ff;
}

.option-btn.selected {
    background-color: #1890ff;
    color: #ffffff;
    border-color: #0077cc;
}

/* 导航按钮 */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    width: 80%;
    max-width: 500px;
}

.nav-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-btn:disabled {
    background-color: #9e9e9e;
    cursor: not-allowed;
}

.nav-btn:hover:not(:disabled) {
    background-color: #45a049;
}
</style>